<!DOCTYPE html>
<html>
<head>
    {% load static %}
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>忘记密码-重置</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="{% static 'plugins/fontawesome-free/css/all.min.css'  %}">
    <link rel="stylesheet" href="{% static 'css/login.css'  %}">
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css'  %}">
    <link rel="stylesheet" href="{% static 'dist/css/adminlte.min.css' %}">
    <!-- jQuery -->
    <script src="{% static 'js/jquery-3.5.1.min.js' %}"></script>
    <script src="{% static 'plugins/layui/layui.js' %}"></script>
    <link rel="stylesheet" href="{% static 'plugins/layui/css/layui.css'  %}">


</head>
<body class="hold-transition login-page">
<div class="login-box">
  <div class="card">
    <div class="card-body login-card-body" style="min-width: 390px;">
        <p class="login-box-msg" style="text-align: left;"><b>操作注意：</b></p>
        <p class="login-box-msg" style="text-align: left;">1，用户名必填；</p>
        <p class="login-box-msg" style="text-align: left;color: red">2，密码需包含：大小写字母、数字和特殊字符；</p>
        <p class="login-box-msg" style="text-align: left;">3，点击发送按钮获取验证码；</p>
        <p class="login-box-msg" style="text-align: left;">4，填入邮箱中的验证码，确定重置密码。</p>
        <table>
            <tbody>
                <tr>
                    <td class="td"><input type="text" id="user_name" class="login-user" placeholder="用户名"></td>
                </tr>
                <tr></tr> <!--扩大间距-->
                <tr>
                    <td class="td"><input type="password" id="pw1" class="login-passwd" placeholder="新密码"></td>
                </tr>
                <tr></tr> <!--扩大间距-->
                <tr>
                    <td class="td"><input type="password" id="pw2" class="login-passwd" placeholder="确认密码"></td>
                </tr>
                <tr></tr> <!--扩大间距-->
                <tr>
                </tr>
            </tbody>
        </table>
        <div style="height: 15px"></div>
        <div class="row">
            <div class="input-group mb-3 ">
                <div class="col-7">
                    <input class="form-control border-right" type="text" id="code" placeholder="验证码"><span></span>
                </div>
                <div class="col-5">
                    <button type="submit" id="sent_code" style="height: 38px;" class="btn btn-success btn-block" >获取验证码</button>
                </div>
            </div>
        </div>
        <div class="row">
          <div class="col-12">
            <button type="submit" id="submit" style="height: 38px;" class="btn btn-primary btn-block">重置密码</button>
          </div>
          <!-- /.col -->
        </div>
      <p class="mt-3 mb-1">
        <a style="color: #777" href="{% url 'login:user_login' %}">登录</a>
      </p>
    </div>
    <!-- /.login-card-body -->
  </div>
</div>
<!-- /.login-box -->
{% block custom_js %}
    <script src="{% static 'js/check.js' %}"></script>
<script>
    //ajax提交
    $.ajaxSetup({
    data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
    });
    $(document).ready(function () {
        //发送验证码
        $("#sent_code").click(function () {
            //确认用户是否输入了用户名
            user_name = $("#user_name").val()
            if(!user_name){
                //提示用户，需要输入用户名
                layui.use('layer',function () {
                    var layer=layui.layer;
                    layer.alert("请输入用户名！",{
                        icon: 0,
                        skin: 'layer-ext-moon',
                    })
                })
            }else {
                //发送ajax请求，让后台生产一个验证码，并发送到用户邮箱
                $.ajax({
                    url:'{% url 'login:recover_password' %}',
                    type: 'POST',
                    data:{
                        user_name:$("#user_name").val(),
                    },
                    success: function (data) {
                        layui.use('layer',function () {
                            var layer=layui.layer;
                            if (data.status === 0){
                                layer.alert(data.info,{
                                    icon: 0,
                                    skin: 'layer-ext-moon',
                                })
                            }else {
                                layer.alert(data.info,{
                                    icon: 1,
                                    skin: 'layer-ext-moon',
                                })
                                //发送邮件成功后，限制用户过15秒才能再次获取验证码
                                function settime($obj,time){
			                        if(time===0){
				                        $obj.attr("disabled",false);
				                        $obj.css("background","#28a745").css("cursor","pointer");
				                        $obj.text("获取验证码");
				                        return;
			                        }else{
				                        $obj.attr("disabled",true);
				                        $obj.css("background","#ccc").css("cursor","noe-allowed");
				                        $obj.text("重新发送("+time+")");
				                        time--;
			                        }
			                        setTimeout(function(){settime($obj,time)},1000);
		                        }
		                        settime($("#sent_code"),15);
                            }
                          })
                    }
                })
            }
        })
        $("#submit").click(function () {
            //判断用户密码是否符合要求
            msg = ''
            pw1 = $("#pw1").val()
            pw2 = $("#pw2").val()
            if(checkpasswd(pw1,pw2)){
                //密码校验通过，则提交到服务器进行密码重置
                $.ajax({
                    url: '{% url 'login:recover_password' %}',
                    type: 'POST',
                    data: {
                        'user_name': $("#user_name").val(),
                        'pw1': $("#pw1").val(),
                        'pw2': $("#pw2").val(),
                        'code': $("#code").val(),
                    },
                    //请求成功后执行提醒
                    success: function (data) {
                        //弹窗告警
                        layui.use('layer',function () {
                            var layer=layui.layer;
                            if (data.status === 3){
                                layer.msg(data.info, function(){
                                    location.href = "{% url 'login:user_login' %}";
                                })
                            }else {
                                layer.alert(data.info,{
                                    icon: 0,
                                    skin: 'layer-ext-moon',
                                })
                            }
                        })
                        }
                    })
            }else {
                //密码校验失败，则弹窗提示用户检查密码
                layer.alert("密码校验失败，请检查密码强度或前后是否一致！",{
                    icon: 0,
                    skin: 'layer-ext-moon',
                })
            }
    })})
</script>
{% endblock %}
</body>
</html>
